<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米种类列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css"/>
		<style type="text/css">
			/* @font-face {
			  font-family: 'iconfont';
			  src: url('iconfont.eot');
			  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
			      url('iconfont.woff2') format('woff2'),
			      url('iconfont.woff') format('woff'),
			      url('iconfont.ttf') format('truetype'),
			      url('iconfont.svg#iconfont') format('svg');
			}
			.iconfont {
			  font-family: "iconfont" !important;
			  font-size: 16px;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			} */
			.box {
				margin: 0 auto;  /*div水平居中*/
				width: 1228px;
				background-color: #B0B0B0;
			}
			.category {
				width: 234px;
				height: 460px;
				background-color: rgba(0,0,0,.5); /*背景颜色*/
			}
			.category > .category-list {
				list-style: none;    /*去掉ul的小黑点*/
				margin: 0;  /*设置外边距*/
				padding: 20px 0;  /*设置内边距*/
				
			}
			.category > .category-list li {/*选择的是 ul 里的所有后代的li标签*/
				padding: 0 30px;  
				height: 42px;
			}
			.category > .category-list a {  /*选择的是 ul 里的所有后代的a标签*/
				text-decoration: none;
				color: #FFFFFF;
				font-size: 14px;   /*设置文字大小*/
				line-height: 42px;
			}
			.icon--chevron,.icon-zhiban {
				color: #FFFFFF;
				font-size: 12px;
				font-weight: 900;  /*字体的粗细*/
				float: right;   /* 浮动 */
				
			}
			.category > .category-list li:hover {  /*鼠标悬停在li上的时候一个样式*/
				background-color: #FF6700;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="category">
				<ul class="category-list">
					<li><a href="">手机 电话卡 <span class="iconfont icon--chevron"></span> </a></li>
					<li><a href="">手机 电话卡 <span class="iconfont icon--chevron"></span> </a></li>
					<li><a href="">手机 电话卡 <span class="iconfont icon--chevron"></span> </a></li>
					<li><a href="">手机 电话卡 <span class="iconfont icon--chevron"></span> </a></li>
					<li><a href="">手机 电话卡 <span class="iconfont icon--chevron"></span> </a></li>
					<li><a href="">手机 电话卡 <span class="iconfont icon--chevron"></span> </a></li>
					<li><a href="">手机 电话卡 <span class="iconfont icon--chevron"></span> </a></li>
					<li><a href="">手机 电话卡 <span class="iconfont icon--chevron"></span> </a></li>
					<li><a href="">手机 电话卡 <span class="iconfont icon--chevron"></span> </a></li>
					<li><a href="">手机 电话卡 <span class="iconfont icon--chevron"></span> </a></li>
				</ul>
			</div>
		</div>
		
	</body>
</html>
